<!-- *@description:  -->
<!-- *@Author: M.佑先生 -->
<!-- *@Date: 2025-07-11 09:46:01 -->
<template>
	<div class="AccessSkillBox">
		<!-- <div class="ellipse-bg"></div> -->
		<div class="arrows-box">
			<div class="arrow-row">
				<div class="arrow-item" v-for="(item, i) in topArrows" :key="item.text">
					<div class="arrow-anim" :style="{ animationDelay: `${i * 0.2}s` }">
						<img src="@/assets/img/arrow-up.png" alt="arrow" />
					</div>
					<div class="arrow-label">{{ item.text }}</div>
				</div>
			</div>
			<div class="arrow-row">
				<div class="arrow-item" v-for="(item, i) in bottomArrows" :key="item.text">
					<div class="arrow-anim" :style="{ animationDelay: `${(i + 1) * 0.2}s` }">
						<img src="@/assets/img/arrow-up.png" alt="arrow" />
					</div>
					<div class="arrow-label">{{ item.text }}</div>
				</div>
			</div>
		</div>
		<div class="access-btn">接入能力</div>
	</div>
</template>

<script setup>
const topArrows = [{ text: 'IOT' }, { text: '气象数据' }, { text: '地理模型' }];
const bottomArrows = [
	{ text: '无人机' },
	{ text: '视频监控' },
	{ text: '水域数据' },
	{ text: '卫星数据' }
];
</script>

<style lang="scss" scoped>
.AccessSkillBox {
	width: 594px;
	height: 230px;
	position: relative;
	background: url('@/assets/img/AccessSkillBox.png') no-repeat center center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.ellipse-bg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 520px;
		height: 120px;
		border-radius: 50%;
		border: 2px solid #3acdff;
		opacity: 0.3;
		z-index: 1;
		pointer-events: none;
	}
	.arrows-box {
		position: relative;
		z-index: 2;
		width: 100%;
		.arrow-row {
			position: relative;
			display: flex;
			width: 100%;
			justify-content: space-around;
			padding: 0 98px;
			top: 16px;
			box-sizing: border-box;
			&:last-child {
				top: -45px;
				padding: 0 32px;
			}
		}
		.arrow-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 90px;
			.arrow-anim {
				width: 84px;
				height: 60px;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				animation: arrowUp 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
				img {
					width: 100%;
					height: 100%;
				}
			}
			.arrow-label {
				margin-top: 6px;
				color: #fff;
				font-size: 16px;
				text-shadow: 0 2px 8px #0ff;
				letter-spacing: 1px;
			}
		}
	}
	.access-btn {
		width: 165px;
		height: 46px;
		position: absolute;
		left: 50%;
		bottom: 0px;
		text-align: center;
		line-height: 46px;
		transform: translateX(-50%);
		background: url('@/assets/img/titleBg.png') no-repeat center center;
		background-size: 100% 100%;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		border-radius: 8px;
		z-index: 3;
		cursor: pointer;
		letter-spacing: 4px;
	}
}

@keyframes arrowUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-16px);
		opacity: 0.7;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>
